<template>
  <section class="xm-content xm-role">
    <el-form ref="form"
      v-loading="box_loading"
      :model="form" :rules="rules"
      size="mini"
      label-width="100px" inline-message>
      <el-form-item label="属性类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择属性类型">
          <el-option :value="1" label="Control alarm" />
          <el-option :value="2" label="Tolerance alarm" />
          <el-option :value="3" label="SCRAP" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择颜色" prop="color">
        <div style="display: flex">
          <el-input v-model="form.color" clearable class="marginRight20" />
          <el-color-picker
              v-model="form.color"
              @change="changeColor"
          ></el-color-picker>
        </div>
      </el-form-item>
    </el-form>
    <div class="xm-footer">
      <el-button type="primary" size="mini" :loading="btn_loading" @click="saves('form')">确 定</el-button>
      <el-button type="info" size="mini" @click="close">关 闭</el-button>
    </div>
  </section>
</template>

<script>
import { addAttributes,EditAttributes } from '@/api/xapi'
export default {
  props: {
    layerid: {
      default: 0
    },
    row: {
      default: {}
    }
  },
  data() {
    return {
      box_loading: false,
      btn_loading: false,
      form: {
          type:'',
        color:'#FF2929'
      },
      rules: {
          type: [{ required: true, message: '必填', trigger: 'blur' }],
        color: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  mounted() {
     if (this.row.id) this.form = JSON.parse(JSON.stringify(this.row))
  },
  methods: {
    changeColor(e){
      this.form.color = e;
    },
    /* 添加、编辑 */
    saves(formName) {
        this.$refs[formName].validate(async valid => {
            if (valid) {
                var obj = JSON.parse(JSON.stringify(this.form))
                this.btn_loading = true
                let res = ''
                if(this.row.id){
                     res = await EditAttributes(obj)
                }else{
                     res = await addAttributes(obj)
                }
                this.btn_loading = false
               if (res.code == '') return false
                Object.assign(this.$data.form, this.$options.data().form)
                this.$layer.close(this.layerid)
                this.$parent.getList()
                this.$message({ message: '操作成功', type: 'success' })
            } else {
                this.$refs[formName].validate()
            }
        })
    },
    close() {
      this.$layer.close(this.layerid)
    }
  }
}
</script>
<style>
    .el-upload-list__item {
        transition: none !important;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
    .el-dialog .el-dialog__footer {
      z-index: 100;
    }
</style>
